<script setup>
import ProductCart from '@/components/product-card/ProductCard.vue'

import {ref} from 'vue';

const loading = ref(true)
setTimeout(() => {
  loading.value = false
}, 500)

</script>

<template>
  <div class="commodity">
    <div class="header">
      <div>
        <h3>优选好物</h3>
        <div class="line"></div>
      </div>
    </div>
    <div class="card_list">
      <ProductCart v-for="(item,index) in Array(4)" :key="index" class="card" />
    </div>
    <div class="more">
      <span class="fz12">查看更多 ></span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.commodity{
  padding: 0 1.5rem;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.6rem;
    height: 2.5rem;
    h3 {
      font-size: 1.8rem;
      color: #333333;
      font-weight: bold;
    }
    .line{
      width:3rem;
      height: .5rem;
      background: linear-gradient(90deg, var(--van-primary-color) 0%, #FBEAA8 92%);
    }
  }
  .card_list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .card{
      width: calc(50% - 0.5rem);
      margin-bottom: 1rem;
    }
  }
  .more{
    padding: .5rem 0 2rem 0;
    font-size: 1.4rem;
    color: #CCCCCC;
    text-align: center;
  }
}

</style>